<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">智能定向</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="系统根据您的店铺或宝贝为您挑选的优质人群（为保证投放效果，建议持续投放2天以上）">系统根据您的店铺或宝贝为您挑选的优质人群（为保证投放效果，建议持续投放2天以上）</span>
      <el-button @click.native="intelligenceShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="智能定向 "
          :visible.sync="intelligenceDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="intelCheck">
              <div class="mb25">
                <el-checkbox-group v-model="checkedPeople">
                  <el-checkbox label="32768" @change="changeShopcheckbox">智能定向-店铺优质人群</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning4">
              <i class="el-icon-warning"></i>
              请至少选择一个子标签
            </a>
            <el-button @click="intelligenceDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="intelligenceConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      intelligenceMsg:Array
    },
    data() {
      return {
        intelligenceDialog: false,
        checkedPeople:[],
        shopPeople:[],
        intelligence:-1,
        intelligenceObject:{},
        intelligenceList:[],//传给index页面的值
        warning4: false
      }
    },
    methods: {
      intelligenceShowModal() {//设置定向
        // 先设置初始状态
        this.checkedPeople=[];
        this.shopPeople = [];
        this.intelligenceList = [];

        if(this.intelligenceMsg.length){
          this.intelligenceList=this.intelligenceMsg;
          this.checkedPeople.push('32768');
          this.changeShopcheckbox('32768');
        }
        this.intelligenceDialog = true;
        this.warning4 = false;
      },
      changeShopcheckbox(val){
        if(val){
          var type = JSON.parse(sessionStorage.getItem('campaign')).type;
          if(type){
            this.$http.get('/zuanzhan/crowd/intelligence-shop-scale',{
              params:{
                "campaign_type":type
              }
            }).then((res) => {
              if (res.data.code == 200) {
                this.shopPeople.push(res.data.data[0]);
                this.shopPeople[0]=Object.assign({},this.shopPeople[0],{id:'32768',type:'智能定向-店铺优质人群',matrix_price:{}});
              }
            }).catch((error) => {
              console.log(error);
            });
          }
        }else{
          this.shopPeople = [];
        }
      },
      intelligenceConfirm() {//相似宝贝定向的确认
        this.intelligenceList = [];
        //这里要判断两个CheckBox的值是不是为空
        if (!this.checkedPeople.length) {
          this.warning4 = true;
        }else{
          this.intelligenceList.push(this.shopPeople[0]);
//          console.log(this.intelligenceList)
          this.warning4 = false;
          this.$emit("intelligenceData",this.intelligenceList);//传给父组件
          this.intelligenceDialog = false;
        }
      }
    }
  }
</script>
<style>
  .similarTem .el-radio__label{
    color: transparent!important;
  }
</style>
<style scoped lang="stylus">
  .slotContent
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 40px 15px;
    .intelCheck
      .mb25
        margin: 20px 0;
      .searchbox
        position: relative;
        .el-icon-search
          position: absolute;
          left: 8px;
          top: 6px;
          font-size: 18px;
          color: #999;
        input
          width: 100%;
          padding-left: 30px;


  .elTable
    .similarImg
      width: 70px;
      height: 70px;
      margin-right:20px;

  .warning
    color: #a40100;
    margin-right: 15px;

</style>

